<template>
  <!-- 单体电池 -->
  <div class="bmsContent">
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
      class="chartForm"
    >
      <a-form-item label="电池堆名称">
        <a-select
          ref="select"
          v-model:value="form.linkId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeLink"
        >
          <a-select-option
            v-for="item in energyLinkList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="电池簇名称">
        <a-select
          ref="select"
          v-model:value="form.blockId"
          class="formInput"
          allow-clear
          placeholder="请选择"
          @change="changeBlock"
        >
          <a-select-option
            v-for="item in blockList"
            :value="item.deviceId"
            :key="item.deviceId"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="模块名称" v-if="!!batteryList.length">
        <a-select
          ref="select"
          v-model:value="form.batteryId"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option
            v-for="item in batteryList"
            :value="item.batteryId"
            :key="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="getBatteryData"
        >查询</a-button
      >
      <a-button v-hasPermission="'monitorBatteryCheckData'" type="primary" class="filterBtn yellowBtn" @click="checkData"
        >查看数据</a-button
      >
    </a-form>
    <div class="bmsBox">
      <!-- <div class="title">{{ item.title }}</div> -->
      <a-spin :spinning="chartLoading">
        <a-card class="content" v-if="defaultData.contentList?.length">
          <template #title>
            <div class="header">
              <div
                v-for="(headerItem, headerIndex) in defaultData.titleList"
                :key="headerIndex"
              >
                {{ headerItem.name }}：<span v-param="headerItem.pdId">{{
                  headerItem.value
                }}</span>
              </div>
            </div>
          </template>
          <div class="data">
            <div
              v-for="(dataItem, dataIndex) in defaultData.contentList"
              :key="dataItem.dateTime"
              class="dataItem"
            >
              <img :src="dataItem.imgType" class="batteryImg" />
              <div class="details">
                <span class="detailsSpan">{{ dataItem.name }}</span>
                <span class="detailsSpan"
                  >温度：<span v-param="dataItem.temperaturePdId">{{
                    dataItem.temperature
                  }}</span></span
                >
                <span class="detailsSpan"
                  >电压：<span v-param="dataItem.voltPdId">{{
                    dataItem.volt
                  }}</span></span
                >
                <span class="detailsSpan">内阻：{{ dataItem.resistance }}</span>
              </div>
            </div>
          </div>
        </a-card>
      </a-spin>
      <a-empty
        v-if="!chartLoading && !defaultData.contentList?.length"
        style="opacity: 0.5; margin-top: 50px"
      />
    </div>
  </div>

  <!-- 查看数据 -->
  <DetailsData
    :detailsDataVisible="detailsDataVisible"
    :stationInfo="stationInfo"
    :energyLinkList="energyLinkList"
    @update:detailsDataVisible="(val) => (detailsDataVisible = val)"
  />
</template>
<script setup>

import DetailsData from "./detailsData.vue"
import batteryHigher from "@/assets/batteryHigher.png"
import batteryLower from "@/assets/batteryLower.png"
import batteryNormal from "@/assets/batteryNormal.png"

const props = defineProps({
  stationInfo: {
    type: Number,
  },
})
const detailsDataVisible = ref(false)
const defaultData = ref([])
const $api = inject("$api")
const form = ref({
  linkId: null,
  blockId: null,
  batteryId: null,
})
const checkData = () => {
  detailsDataVisible.value = true
}
const energyLinkList = ref([])
const getEnergyLinkList = async () => {
  // 获取电池堆列表 如果不是主电池堆，需要拉取电池堆列表指定所属
  const res = await $api.energyLinkList({
    current: 1,
    size: 10000,
    stationId: props.stationInfo.id,
  })
  if (res && res.code === 0) {
    energyLinkList.value = res?.data
    form.value.linkId = energyLinkList.value?.[0]?.deviceId
    return res.data
  }
}
const changeLink = async (id) => {
  form.value.blockId = null
  form.value.batteryId = null
  if (!id) {
    blockList.value = []
    batteryList.value = []
    return
  }
  await getBlockList(id)
  batteryBlockList(form.value.blockId)
}
const changeBlock = async (id) => {
  form.value.batteryId = null
  if (!id) {
    batteryList.value = []
    return
  }
  batteryBlockList(id)
}
const blockList = ref([])
const getBlockList = async (id) => {
  const params = {
    stationId: props.stationInfo.id,
    linkId: id,
  }
  const res = await $api.powerBlockList(params)
  if (res && res.code === 0) {
    blockList.value = res.data
    form.value.blockId = blockList.value?.[0]?.deviceId
    return res.data
  }
}
const chartLoading = ref(false)
const getBatteryData = async () => {
  if (!form.value.blockId) {
    message.error("请选择电池簇")
    return
  }
  const params = {
    stationId: props.stationInfo?.id,
    blockId: form.value.blockId, // 电池簇id
    batteryId: form.value.batteryId, // 电池id
  }
  const res = await $api.batteryData(params)
  if (res?.code === 0) {
    defaultData.value = res.data
    const temperature = res.data.contentList.map(
      (item) => item.temperature.split(" ")[0]
    )

    for (const item of defaultData.value.contentList) {
      const temp = Number(item.temperature.split(" ")[0])

      if (temp >= 40) {
        item.imgType = batteryHigher
      } else if (temp <= 28) {
        item.imgType = batteryLower
      } else {
        item.imgType = batteryNormal
      }
    }
  }
}
const batteryList = ref([])
const handleChageStation = async () => {
  chartLoading.value = true
  Promise.all([
    await getEnergyLinkList(),
    await getBlockList(form.value.linkId),
    batteryBlockList(form.value.blockId),
  ])
    .then((resData) => {
      if (resData?.[0]?.length && resData?.[1]?.length) {
        getBatteryData()
      }
    })
    .finally(() => {
      chartLoading.value = false
    })
}
const batteryBlockList = async (blockId) => {
  if (!form.value.blockId) {
    return
  }
  const res = await $api.batteryBlockList(blockId)
  if (res && res.code === 0) {
    batteryList.value = res.data.filter((item) => item)
    form.value.batteryId = batteryList.value?.[0]?.batteryId
    return res.data
  }
}
defineExpose({ handleChageStation })
</script>

<style lang="less" scoped>
.bmsContent {
  overflow-y: auto;
  height: calc(100vh - 270px);
}
.bmsBox {
  .title {
    font-size: 20px;
    margin: 20px 0 12px 0;
  }
  .header {
    font-size: 16px;
    height: 56px;
    line-height: 56px;
    div {
      display: inline-block;
      width: 25%;
    }
  }
  .data {
    display: flex;
    justify-content: start;
    box-sizing: border-box;
    flex-wrap: wrap;
    .dataItem {
      flex: 0 0 25%;
      margin-bottom: 24px;
      height: 85px;
      display: flex;
    }
    .details {
      height: 80px;
      display: inline-block;
      flex: 0 0 80%;
      .detailsSpan {
        display: block;
      }
    }
  }
}
::v-deep(.ant-card-body) {
  padding: 24px 5% 0 5%;
}
.chartForm {
  margin: 20px 0;
}
.formInput {
  width: 220px;
}
.batteryImg {
  width: 40px;
  height: 80px;
  margin-right: 20px;
  vertical-align: baseline;
}
.filterBtn {
  margin-right: 20px;
}
</style>
